import React from 'react'
import { Card, Button, Table, Modal } from 'antd';
import Utils from './../../utils/utils'
import axios from './../../axios'
import BaseForm from './../../components/BaseForm'

// const FormItem = Form.Item
// const Option = Select.Option
class Order extends React.Component {
    state = {
        list: []
    }
    params = {  
        page: 1
    }
    //封装FilterForm 完成组件化思想
    formList = [
        {
            type: 'SELECT',
            label: '城市',
            field: 'city',
            placeholder: '全部',
            initialValue: '1',
            width: 80,
            list: [{id: '0', name: '全部'},{id: '1', name: '北京'},{id: '2', name: '上海'},{id: '3', name: '天津'},{id: '4', name: '南京'}]
        },
        {
            type: '时间查询',
            label: '订单查询',
        },
        {
            type: 'SELECT',
            label: '订单状态',
            field: 'order_status',
            placeholder: '全部',
            initialValue: '1',
            width: 100,
            list: [{id: '0', name: '全部'},{id: '1', name: '进行中'},{id: '2', name: '进行中(临时锁车)'},{id: '3', name: '结束行程'}]
        }
    ]
    

    componentDidMount() {
        this.requestList()
    }

    //1获取Table表单数据
    requestList = () => {
        const _this = this
        axios.requestList(this, '/order/list', this.params.page, true )
        // axios.ajax({
        //     url: '/order/list',
        //     data: {
        //         params: {
        //             page: this.params.page
        //         }
        //     }
        // }).then((res) => {
        //     res.result.item_list.map((item, index) => {
        //         item.key = index
        //         return item
        //     })
        //     this.setState({
        //         list: res.result.item_list,
        //         pagination: Utils.pagination(res, (current) => {
        //             _this.params.page = current;
        //             _this.requestList();
        //         })
        //     })
        // })
    }

    onRowClick = (record, index) => {
        let selectKey = [index]
        this.setState({
            selectedRowKeys: selectKey,
            selectedItem: record
        })
    }
    //2获取订单详情， 重新跳出界面

    openOrderDetial = () => {
        //先确认有没有选中订单
        let item = this.state.selectedItem;
        if (!item) {
            Modal.info({
                title: '信息',
                content: '请先选择一条订单'
            })
            return;
        }
        // 以新窗口打开
        window.open(`/#/common/order/detail/${item.id}`, '_blank')
    }

    // 3. 传给封装的 BaseForm
    handleSubmit = (params) => {
        this.params = params;
        this.requestList();
    }
    render() {
        const columns = [
            {
                title: '订单编号',
                dataIndex: 'order_sn',
            }, {
                title: '车辆编号',
                dataIndex: 'order_sn',
            }, {
                title: '用户名',
                dataIndex: 'user_name',
            }, {
                title: '手机号码',
                dataIndex: 'mobile',
            }, {
                title: '里程',
                dataIndex: 'distance',
                render(distance) {
                    return distance / 1000 + ' Km'
                }
            }, {
                title: '行程时常',
                dataIndex: 'total_time',
                render(time) {
                    // return parseInt(time/60%60) + '小时' + parseInt(time/60/60) + '分钟' + parseInt(time/3600) + '秒'
                    return Utils.formateDate(time)
                }
            }, {
                title: '状态',
                dataIndex: 'status',
                render(status) {
                    return status = 1 ? '进行中' : '行程结束'
                }
            }, {
                title: '开始时间',
                dataIndex: 'state_time',
            }, {
                title: '结束时间',
                dataIndex: 'end_time',
            }, {
                title: '订单金额',
                dataIndex: 'total_fee',
                render(money) {
                    return money / 100 + '.00'
                }
            }, {
                title: '实付金额',
                dataIndex: 'user_pay',
                render(money) {
                    return money / 100 + '.00'
                }
            },
        ]

        const selectedRowKeys = this.state.selectedRowKeys
        const rowSelection = {
            type: 'radio',
            selectedRowKeys
        }
        return ( 
            <div>
                <Card>
                    <BaseForm formList={this.formList} filterSubmit={this.handleSubmit} />
                </Card>
                <Card style={{ marginTop: 10 }}>
                    <Button type="primary" onClick={this.openOrderDetial}>订单详情</Button>
                    <Button type="primary" style={{ marginLeft: 20 }}>结束订单</Button>
                </Card>
                <div className="content-wrap">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.list}
                        pagination={this.state.pagination}
                        rowSelection={rowSelection}
                        onRow={(record, index) => {
                            return {
                                onClick: () => {
                                    this.onRowClick(record, index);
                                }
                            };
                        }}
                    />
                </div>
            </div>
        )
    }
}

export default Order